<template>
  <div
      v-loading="loading"
      class="home_page"
      element-loading-text="退出登陆中..."
  >
    <TopBar @returnLogin="returnLogin"/>
    <div class="bottom">

      <NavBar/>

      <div class="router_view_style">
        <transition mode="out-in" name="fade-slide">
          <router-view/>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import TopBar from "@/components/TopBar/index.vue";
import NavBar from "@/components/NavBar/index.vue";

export default {
  name: 'HomePage',
  data() {
    return {
      loading: false,
      transitionName: 'slide-left'
    }
  },
  watch: {
    $route(to, from) {
      const toDepth = to.path.split('/').length
      const fromDepth = from.path.split('/').length
      this.transitionName = toDepth > fromDepth ? 'slide-left' : 'slide-right'
    }
  },
  components: {TopBar, NavBar},
  mounted() {
    this.$notify({
      title: '提示',
      message: '点击头像可以上传头像，昵称使用为登陆时输入的用户名',
    })
  },
  methods: {
    returnLogin(v) {
      this.loading = v
    }
  }
}
</script>

<style scoped>
.home_page {
  width: 100%;
  min-height: 100vh;
  background: #A8D0E622;

  .bottom {
    display: flex;

    .router_view_style {
      padding: 2vh;
    }
  }
}

/* 新增过渡动画 */
.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}

.fade-slide-enter {
  opacity: 0;
  transform: translateX(30px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}
</style>
